import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux';
var Dialog = require('rc-dialog');
import { Button } from 'antd';

import { setDialog } from '../../reducers/common/actions';
import { addRow } from '../../reducers/page/actions';

class ComponentBox extends Component {
	constructor(props) {
        super(props);
        this.state = { title : "" };
    }
	render() {
        let dialogTitle = "创建页面";
        let { title } = this.state;
        let DialogVisible = this.props.dialog.pageCreateDialogVisible;
		return (
			<Dialog
				wrapClassName={"modalCenter"}
				animation="zoom"
				maskAnimation="fade"
				onClose={::this.onCancelBtnClick}
				visible={DialogVisible}
				title={<div className="modaltitle">{dialogTitle}</div>}
				footer={
                    [
                      <Button
                        type="primary"
                        key="save"
                        onClick={::this.onConfirmBtnClick} >确定</Button>
                    ]
                  }>
                <div className="form-ctl no-padding">
                    <form className="form-horizontal">
                        <div className="form-group">
                            <label htmlFor="name" className="col-sm-2 control-label">页面标题</label>
                            <div className="col-sm-10">
                                <input className="form-control" id="name"
                                       placeholder=""
                                       type="text"
                                       value={ title ? title : "" }
                                       onChange={this.onValueChanged.bind(this,'title')}
                                />
                            </div>
                        </div>
                    </form>
                </div>
			</Dialog>
		);
	}
    onCancelBtnClick(){
        this.props.setDialog("pageCreateDialogVisible",false);
    }
    onConfirmBtnClick(){
        this.props.addRow(this.state.title);
        let title = "";
        this.setState({title})
        this.props.setDialog("pageCreateDialogVisible",false);
    }
    onValueChanged(key,e){
        let state = {};
        state[key] = e.target.value;
        this.setState(state)
    }
}
export default connect(
    state =>{
        return {
            dialog: state.common.dialog
        };
    },
    dispatch => {
        return {
            setDialog: (key,value) => dispatch(setDialog(key,value)),
            addRow:(title) => dispatch(addRow(title)),
        }
    }
)(ComponentBox);
